<template>
  <div class="relative flex-center wh-full sp-user">
    <dark-mode-switch
      :dark="theme.darkMode"
      class="absolute left-24px top-24px z-13 text-20px"
      @update:dark="theme.setDarkMode"
    />
    <n-card :bordered="false" size="large" class="z-4 !w-auto pa-0 rounded-10px">
      <div class="sp-user__form">
        <h2>登陆「AI 糖」</h2>
        <p>手机号（未注册的手机号将自动注册）</p>
        <main>
          <transition name="fade-slide" mode="out-in" appear>
            <component :is="activeModule.component" />
          </transition>
        </main>
      </div>
    </n-card>
    <div class="sp-user__logo"></div>
    <login-bg :theme-color="bgThemeColor" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { Component } from 'vue';
import { loginModuleLabels } from '@/constants';
import { useThemeStore } from '@/store';
import { getColorPalette } from '@/utils';
// import { $t } from "@/locales";
import { PwdLogin } from './components';

interface Props {
  /** 登录模块分类 */
  module: UnionKey.LoginModule;
}

const props = defineProps<Props>();

const theme = useThemeStore();

interface LoginModule {
  key: UnionKey.LoginModule;
  label: string;
  component: Component;
}

const modules: LoginModule[] = [
  {
    key: 'pwd-login',
    label: loginModuleLabels['pwd-login'],
    component: PwdLogin
  }
];

const activeModule = computed(() => {
  const active: LoginModule = { ...modules[0] };
  const findItem = modules.find(item => item.key === props.module);
  if (findItem) {
    Object.assign(active, findItem);
  }
  return active;
});

const bgThemeColor = computed(() => (theme.darkMode ? getColorPalette(theme.themeColor, 7) : theme.themeColor));
</script>
